<template>
	<view class="indexview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="false" transparent="show" :color="navbarConfig.color"
			 :title="title">
				<navigator class="min-w" v-if="page == 1" slot="left" url="/pages/index/index" open-type="switchTab">司机</navigator>
			</hx-navbar>
		</view>
		<!-- 首页 -->
		<block v-if="page == 1">
			<map id="map" ref="map" class="map"></map>
			<view class="tabs-box">
				<u-tabs-swiper :activeColor="colorConfig.base" ref="tabs" :list="carList" :current="cur" @change="change"
				 :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<view class="scroll-box">
				<scroll-view class="full" scroll-y>
					<swiper class="swiper-box" :current="swiperCur" duration="300" @change="changeSwiper">
						<swiper-item v-for="(tabItem, tabIndex) in carList" :key="tabIndex">
							<view class="car-info">
								<view class="car-info-left">
									<image :src="tabItem.pictures || '/static/car0' + tabIndex + '.png'" mode="widthFix"></image>
								</view>
								<view class="car-info-right">
									<view>车型：{{tabItem.name}}</view>
									<view>载重/体积：{{tabItem.carLoad}}吨/{{tabItem.volume}}方</view>
									<view>长*宽*高：{{tabItem.length}}*{{tabItem.width}}*{{tabItem.height}}米</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="form-box">
						<u-form :model="form1" ref="uForm1">
							<u-form-item label-width="150" label="装货地址:" prop="send">
								<u-input disabled v-model="form1.send" type="text" placeholder="请选择装货地址" @tap="getAddress('send')"/>
							</u-form-item>
							<u-form-item label-width="150" label="卸货地址:" prop="take">
								<u-input disabled v-model="form1.take" type="text" placeholder="请选择卸货地址" @tap="getAddress('take')"/>
							</u-form-item>
							<u-form-item label-width="150" label="货物类型:" prop="type">
								<u-input v-model="form1.type" type="text" placeholder="请输入货物类型"/>
							</u-form-item>
							<u-form-item label-width="150" label="装货时间:" prop="time">
								<date-time-picker placeholder="请选择装货时间" fields="minute" @change="goodSendTime"></date-time-picker>
							</u-form-item>
						</u-form>
					</view>
					<view class="fiexd-btm">
						<u-button class="custom-style" type="primary" @tap="sendGood()">发货</u-button>
					</view>
				</scroll-view>
			</view>
		</block>
		<!-- 业务简介 -->
		<view class="scroll-box" v-show="page == 2">
			<view class="textinfo">
				<view class="info-info ql-container ql-snow">
					<!-- <parse :content="demoHtml" @navigate="demoHtml"></parse> -->
					<text class="ql-editor" v-html="datainfo"></text>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<block v-if="page == 3">
			<view class="tabs-box">
				<u-tabs-swiper :activeColor="colorConfig.base" ref="tabs" :list="navList" :current="current" @change="tabsChange"
				 :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="scroll-box" :current="swiperCurrent" duration="300" @change="changeTab">
				<swiper-item v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view class="full" scroll-y @scrolltolower="loadData">
						<!-- 空白页 -->
						<empty v-if="tabItem.loaded == true && tabItem.orderList.length == 0" src="empty"></empty>
						<!-- 订单列表 -->
						<view class="order-info" v-for="(item, index) in tabItem.orderList" :key="index" @tap="navToDetail(item)">
							<view class="order-info-state">
								{{statusMap[item.status]}}
							</view>
							<view class="order-info-goto">
								<view class="order-info-goto-1"><text class="zhuang">起</text></view>
								<text class="order-info-goto-2">{{item.startPointName}}</text>
							</view>
							<view class="order-info-goto">
								<view class="order-info-goto-1"><text class="xie">终</text></view>
								<text class="order-info-goto-2">{{item.endPointName}}</text>
							</view>
							<u-line color="#101010" margin="20rpx -30rpx" length="690upx"></u-line>
							<view class="order-info-detail">
								<view class="order-info-detail-1">订单生成时间：</view>
								<view class="order-info-detail-2">{{$util.sliceTime(item.createTime)}}</view>
							</view>
							<view class="order-info-detail" v-if="item.status == 5">
								<view class="order-info-detail-1">订单完成时间：</view>
								<view class="order-info-detail-2">{{$util.sliceTime(item.finishTime)}}</view>
							</view>
							<view class="order-info-detail">
								<view class="order-info-detail-1">{{item.carType}} | {{item.cargoType }}</view>
								<view class="order-info-detail-2">{{item.distance}}公里</view>
							</view>
						</view>
						<uni-load-more :status="tabItem.loading"></uni-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</block>
		<view class="scroll-box" v-if="page == 4">
			<scroll-view class="full" scroll-y>
				<!-- 个人信息 -->
				<view class="info-box">
					<view class="bg-box" :style="'background-color:' + colorConfig.base"></view>
					<view class="sub-box" v-if="userInfo">
						<image :src="userInfo.imageUrl ? userInfo.imageUrl : '/static/logo.png'" mode="aspectFill"></image>
						{{userInfo.name}}
					</view>

					<view class="nologinView" v-if="!userInfo">
						<u-button @tap="navTo('/pages/login/login')" :custom-style="customStyle">您未登录，请点击登录</u-button>
					</view>
				</view>

				<uni-list class="list-box">
					<uni-list-item class="list-item" title="发货记录" :show-arrow="true" thumb="/static/icon01.png" @tap="orderTo()"></uni-list-item>
					<uni-list-item class="list-item" title="上传收款码" :show-arrow="true" thumb="/static/icon03.png" @tap="navTo('/pages/pay/qrcode')"></uni-list-item>
					<uni-list-item class="list-item" title="投诉建议" :show-arrow="true" thumb="/static/icon04.png" @tap="navTo('/pages/contact/contact')"></uni-list-item>
					<uni-list-item class="list-item" title="检查更新" :show-arrow="true" thumb="/static/icon06.png" @tap="navTo('/pages/index/index')"></uni-list-item>
					<uni-list-item class="list-item" title="修改密码" :show-arrow="true" thumb="/static/icon07.png" @tap="navTo('/pages/login/password')"></uni-list-item>
					<uni-list-item class="list-item" title="退出登录" :show-arrow="true" thumb="/static/icon09.png" @tap="navTo('/pages/login/login')"></uni-list-item>
				</uni-list>
			</scroll-view>
		</view>

		<!-- tabbar -->
		<uni-bottom-tab :tabIndex="idx" @changeTap="changeTap"></uni-bottom-tab>
	</view>
</template>

<script>
	import uniBottomTab from '@/components/uni-bottom-tab/uni-bottom-tab.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import dateTimePicker from '@/components/uni-datetime-picker.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import empty from "@/components/empty.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				customStyle: {
					margin: '40upx 0 0 0',
					background: '#4f6bad',
					color: '#ffffff'
				},
				datainfo: '123123123123123', //新闻主体
				idx: 1,
				title: '找车',
				page: 1,
				price: 0,
				statusMap: {
					1: '已发布',
					2: '已审核',
					3: '已接单',
					4: '已接货',
					5: '已完成',
					6: '已撤销'
				},
				cur: 0, //切换车型
				swiperCur: 0, //切换车型
				current: 0, //切换tabs
				swiperCurrent: 0, //切换swiper
				carList: [],
				navList: [{
					state: null,
					name: '全部',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 1,
					name: '已发布',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 3,
					name: '已接单',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 5,
					name: '已完成',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}],
				form1: {
					send: '',
					take: '',
					time: '',
					date: '',
					type: ''
				},
				startPoint: '',
				endPoint: '',
				distance: 0,
				rules: {
					send: [{
						required: true,
						message: '发货地址不能为空',
						trigger: 'change'
					}],
					take: [{
						required: true,
						message: '卸货地址不能为空',
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '货物类型不能为空',
						trigger: 'change'
					}],
					time: [{
						required: true,
						message: '装货时间不能为空',
						trigger: 'change'
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm1.setRules(this.rules)
		},
		onLoad(option) {
			this.swiperCurrent = 0
			this.navList.forEach(item => {
				if (item.state == parseInt(option.state)) {
					this.swiperCurrent = i
				}
			})
			this.loadData()
			// this.getdata()
			this.specData()
		},
		components: {
			dateTimePicker,
			uniBottomTab,
			uniLoadMore,
			empty,
			uniList,
			uniListItem
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			getdata() {
				let _vm = this
				_vm.sendRequest({
					url: '/api/global/checkHelp',
					method: 'POST',
					data: {},
					hideLoading: true,
					success: function(res) {
						console.log("帮助中心", res)
						if (res.data.code == 200) {
							_vm.datainfo = res.data.data
						}
					}
				})
			},
			goodSendTime({date, dt}) {
				this.form1.time = date.year + '-' + date.month2 + '-' + date.day2 + ' ' + date.hour2 + ':' + date.minute
				//时间戳
				this.form1.date = Math.round(dt / 1000)
			},
			getAddress(e) {
				uni.navigateTo({
					url: '/pages/ex/maps?type=' + e 
				})
			},
			specData() {
				this.$api.request('POST', '/api/car/selectCarSpecifications').then(res => {
					res.data.forEach(item => {
						let data = {
							name: item.name,
							carLoad: item.carLoad,
							volume: item.volume,
							length: item.length,
							width: item.width,
							height: item.height,
							pictures: item.pictures
						}
						this.carList.push(data)
					})
				})
			},
			sendGood(e) {
				let data = {
					startPointName: this.form1.send,
					startPoint: this.startPoint,
					endPointName: this.form1.take,
					endPoint: this.endPoint,
					loadingTime: this.form1.date,
					distance: this.distance,
					carType: this.carList[this.cur].name,
					carLength: this.carList[this.cur].length,
					cargoType: this.form1.type
				}
				this.$refs.uForm1.validate(valid => {
					if (!valid) {
						return
					} else {
						this.$api.request('POST', '/api/order/createOrderByCargoOwner', data).then(res => {
							this.$api.msg('发单成功')
							setTimeout(() => {
								this.orderTo()
							}, 500)
						})
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index
			},
			//swiper切换
			changeTab(e) {
				this.current = e.target.current
				this.swiperCurrent = e.target.current
				this.loadData('tabChange')
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.swiperCurrent
				let navItem = this.navList[index]
				if (source == 'tabChange' && navItem.loaded == true) {
					//tab切换只有第一次需要加载数据
					return
				}
				if (source == 'orderTo') {
					navItem.pageNum = 1
					navItem.loading = 'more'
				}
				if (navItem.loading != 'more') {
					//防止重复加载
					return
				}
				navItem.loading = 'loading'
				this.$api.request('POST', '/api/order/selectOrderCompleteCargo', {
					status: navItem.state,
					pageNum: navItem.pageNum,
					pageSize: navItem.pageSize
				}, false).then(res => {
					navItem.loading = navItem.pageNum < Math.ceil(res.data.allCount / navItem.pageSize) ? 'more' : 'nomore'
					navItem.pageNum = navItem.pageNum + 1
					if (source == 'orderTo') {
						navItem.orderList = []
					}
					res.data.selectOrderComplete.forEach(item => {
						navItem.orderList.push(item)
					})
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true)
				})
			},
			// tabs通知车型切换
			change(index) {
				this.swiperCur = index
			},
			changeSwiper(e) {
				this.cur = e.target.current
				this.swiperCur = e.target.current
			},
			changeTap(data) {
				this.idx = data.id
				this.page = data.id
				this.title = data.name
			},
			orderTo() {
				this.idx = 3
				this.page = 3
				this.title = '发货记录',
					this.current = 1,
					this.swiperCurrent = 1
				this.loadData('orderTo')
			},
			navToDetail(item) {
				uni.navigateTo({
					url: '/pages/ex/detail?id=' + item.id,
				})
			},
			sendData({address, point}) {
				this.form1.send = address
				this.startPoint = point
				this.distanceMath()
			},
			takeData({address, point}) {
				this.form1.take = address
				this.endPoint = point
				this.distanceMath()
			},
			distanceMath() {
				// 计算2地距离
				if (this.startPoint && this.endPoint) {
					let pk = 180 / 3.14169
					let a1 = this.startPoint.split(',')[1] / pk
					let a2 = this.startPoint.split(',')[0] / pk
					let b1 = this.endPoint.split(',')[1] / pk
					let b2 = this.endPoint.split(',')[0] / pk
					let t1 = Math.cos(a1) * Math.cos(a2) * Math.cos(b1) * Math.cos(b2)
					let t2 = Math.cos(a1) * Math.sin(a2) * Math.cos(b1) * Math.sin(b2)
					let t3 = Math.sin(a1) * Math.sin(b1)
					let tt = Math.acos(t1 + t2 + t3)
					this.distance = (6366 * tt).toFixed(2)
					console.log(this.distance)
				}
			},
			navTo(url) {
				if (!this.userInfo) {
					url = '/pages/login/login'
				}
				if (url == '/pages/login/login') {
					this.$store.commit('logout')
					this.$api.logout()
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	@import "../../static/css/quill.core.css";
	@import "../../static/css/quill.snow.css";
	@import "../../static/css/quill.bubble.css";

	page,
	.indexview {
		height: 100%;
	}

	.indexview {
		display: flex;
		flex-direction: column;
	}

	.scroll-box {
		flex: 1;
		height: 250upx;
	}

	.swiper-box {
		margin-bottom: -30upx;
		height: 240upx;
	}

	.map {
		width: 0;
		height: 0;
		display: none;
	}

	.car-info {
		margin: 0 30upx;
		padding: 20upx 0;
		display: flex;
		flex-wrap: wrap;


		.car-info-left {
			display: flex;
			justify-content: center;
			width: 50%;
			height: 200upx;

			image {
				align-self: center;
				width: 80%;
			}
		}

		.car-info-right {
			width: 50%;
			align-self: center;
		}
	}

	.price-box {
		font-size: 36upx;
		color: #ff3939;
	}

	.info-box {
		position: relative;
		padding: 30upx;

		.sub-box {
			position: relative;
			z-index: 10;
			padding: 30upx;
			font-size: 36upx;
			font-weight: bold;
			text-align: center;
			border-radius: 20upx;
			background-color: #fff;
		}

		image {
			display: block;
			margin: 0 auto 20upx;
			width: 120upx;
			height: 120upx;
			border-radius: 120upx;
		}

		.bg-box {
			position: absolute;
			left: 0;
			right: 0;
			top: -2upx;
			height: 130upx;
			border-radius: 0 0 60upx 60upx;
		}
	}

	.list-box {
		margin: 20upx 40upx 60upx;
		border-radius: 20upx;
		background-color: #fff;

		.list-item {
			font-size: 28upx;
			line-height: 72upx;
		}
	}

	.textinfo {
		padding: 20upx;

		.info-info {
			border: 0;
		}
	}

	.nologinView {
		padding: 20upx;
	}
</style>
